<template>
  <el-dialog
    v-model="props.openPersonalDialogVisible"
    title="修改密码"
    width="500"
    align-center
  >
    <div class="content">
      输入原密码：
      <el-input v-model="oldPassword"></el-input>
      输入新密码：
      <el-input v-model="newPassword"></el-input>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updatePersonalDialogVisible"> 取消</el-button>
        <el-button type="primary" @click="comfirmPersonalDialogVisible">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script lang="ts" setup>
import { ref } from "vue";
import { defineProps, defineEmits } from "vue";
import type { password } from "@/API/interface/personal";
import {changePasswordApi} from "@/API/interface/personal";
import {useLoginStore} from "@/stores/login"
const loginStore = useLoginStore()
import { ElMessage } from 'element-plus'


// 接收父组件传来的 personalDialogVisible
const props = defineProps({
  openPersonalDialogVisible: {
    type: Boolean,
  },
});
// console.log(props.openPersonalDialogVisible);
// 关闭弹窗
const emit=defineEmits(['updatePersonalDialogVisible','comfirmPersonalDialogVisible'])
const updatePersonalDialogVisible=()=>{
  emit('updatePersonalDialogVisible',false)
}
// 修改密码
const oldPassword = ref("");
const newPassword = ref("");

const comfirmPersonalDialogVisible=async ()=>{
  const password: password = {
  username:loginStore.loginInfo!.username,
  oldPassword: oldPassword.value,
  newPassword: newPassword.value,
};
  emit('comfirmPersonalDialogVisible',false);
  console.log("修改密码发送信息",password);
  const res=await changePasswordApi(password)
  console.log("修改密码返回信息",res.data);
  if(res.data.code==200){
    ElMessage({
    message: '密码修改成功！',
    type: 'success',
  })
    oldPassword.value='',
    newPassword.value=''
  }else if(res.data.message=='旧密码不正确，请重新输入'){
    ElMessage.error('旧密码不正确，请重新输入')
    oldPassword.value='',
    newPassword.value=''
  }
}


</script>
  